import React, { type FC }  from "react";
import { useMedia } from "./useMedia";
import { Button } from "antd";

const Index: FC<any> = () => {
    const {microphoneVolume, onCloseStream, onStartStream } = useMedia()
    return (
       <div>
        <Button onClick={onStartStream}>开始录音</Button>
        <Button onClick={onCloseStream}>结束录音</Button>
        <div style={{
            marginTop:'20px',
            display:'flex',
            alignItems:'center'
        }}>
            {
                [1, 2, 3, 4, 5].map(item => {
                return (
                    <div 
                        style={{
                            width:'12px',
                            height:'8px',
                            border: '1px solid #d4d4d4',
                            boxShadow: '0 1px 2px 0 rgba(149, 157, 163, 0.3)',
                            marginRight: '2px',
                            backgroundColor: microphoneVolume > item ? '#1967d2' : '#fff'
                        }}
                        key={item}
                    />
                )
                })
            }
        </div>
       </div>
    )
}
export default Index;

